<script setup>
import topHeader from '@/layout/topHeader.vue'
import Header from '@/layout/header.vue'
import Footer from '@/layout/footer.vue'
import WOW from "wow.js";

onMounted(() => {
    nextTick(() => {
        console.log('new WOW')
        var wow = new WOW({
            boxClass: "wow",//需要执行动画的元素的 class
            animateClass: "animated", // animation.css 动画的 class
            offset: 50,// 距离可视区域多少开始执行动画
            mobile: false,// 是否在移动设备上执行动画
            live: true,// 异步加载的内容是否有效
            scrollContainer: null, // //可选的滚动容器选择器，否则使用window,
            resetAnimation: true, // 结束时重置动画（默认值为true）
        });
        wow.init();
    })
})


const Route = useRoute()
console.log('route', Route);

watchEffect(() => {
    // console.log(2323, Route.name, Route)
    if (!Route.name) return
    //if (Route.meta.isFullPage) {
    //    isFullPage = true
    //} else {
    //    isFullPage = false
    //}
})


</script>

<template>
    <div>
        <div class="relative z-30">
            <topHeader></topHeader>
            <Header></Header>
        </div>
        <div style="height:98px" class="bg-primary-background"></div>
        <router-view v-slot="{ Component, route }">
            <Transition :name="route.meta.transition" translate>
                <component :is="Component" :key="route.name"></component>
            </Transition>
        </router-view>
        <Footer></Footer>
    </div>
</template>

<style lang="less" >
@import '@/style/variable.less';

#app {
    background: @primary-background;
    overflow: hidden;
}

body {
    overflow-x: hidden;

    /** 为了避免动画过程中出现水平方向的滚动条 */
}

.move-left-enter-active,
.move-left-leave-active,
.move-right-enter-active,
.move-right-leave-active {
    will-change: transform; //提升浏览器渲染能力
    transition: transform .5s ease !important;
    animation-duration: .5s !important;
    height: 100%;
    width: 100%;
    //top: 67px;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000; //定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图
    -webkit-perspective: 1000;
    /* Safari 和 Chrome */
}

.move-right-enter-from,
.move-left-leave-to {
    transform: translateX(100%) !important;
    //opacity: 1;
}

.move-right-leave-to,
.move-left-enter-from {
    transform: translateX(-100%) !important;
    //opacity: 1;
}

.fade-enter-active {
    transition: opacity 0.7s ease;
}
</style>
